import React, { useEffect } from 'react';
import s from './style.module.css';
import { withRouter } from 'react-router';
import PropTypes from 'prop-types';
import Table from '@knownsec/react-component/dist/Table';
import Tabs, { TabPane } from '@kuiper-components/tabs';
import cn from 'classnames';
import {
	portCol,
	osCol,
	webCol,
	hostTimeCol,
	openPortCol,
	associatedAssetsCol,
} from '../columns';
import VulTable from './VulTable';
import fetchFer from 'API/fetch';
import { getParams, turnToUrlparam } from '../../../../helpers/getUrlParams';
import { FREQUENCY_UNIT_MAP as UNIT } from '../../../../../common/constants';
import ms from 'ms';

const TRIGGER_TYPE = { schedule: '周期性', manual: '自定义' };
const profile = ['全量漏洞', '低危漏洞', '中危漏洞', '高危漏洞'];
function Detail({
	match: {
		params: { assetType },
	},
	jid,
	tid,
	atid,
}) {
	const [hostInfo, setHostInfo] = React.useState({});
	const [info, setInfo] = React.useState({});
	const getData = async (num, size) => {
		const sendData = {
			id: tid,
			job_id: jid,
		};
		const params = turnToUrlparam(sendData);
		const host = await fetchFer(
			`/api/v2/tasks/vul_host/detail/host?${params}`,
			{
				method: 'GET',
			}
		).catch(error => {
			return null;
		});
		const info = await fetchFer(`/api/v2/tasks/vul_host/detail/cod?${params}`, {
			method: 'GET',
		}).catch(error => {
			return null;
		});
		setHostInfo(host || {});
		setInfo(info || {});
	};
	const timeChange = value => {
		let unit;
		let num;
		if (value) {
			const freq = ms(value);
			unit = value ? freq.replace(/\d*/, '') : 'd';
			num = parseInt(freq.replace(/[a-zA-Z]/, ''), 10);
			if (value % ms('30d') === 0) {
				unit = 'month';
				num = value / ms('30d');
			} else if (value % ms('1w') === 0) {
				unit = 'w';
				num = value / ms('1w');
			}
		}
		return `${num}${UNIT[unit]}1次`;
	};
	useEffect(() => {
		getData();
	}, [tid]);

	return (
		<Tabs className={s.tabs}>
			<TabPane key="1" tab="主机安全监测">
				<VulTable jid={jid} tid={tid} atid={atid} />
			</TabPane>
			<TabPane key="2" tab="信息">
				<div className={cn(s.pointTitle, s.p20_18_16)}>基本信息</div>
				<div className={cn(s.p16_24, s.border)}>
					<span className={s.flex1}>地理位置：中国-湖北-武汉</span>
					<span className={s.flex1}>设备类型：通用主机</span>
					<span className={s.flex1}>操作系统：Linux 2.6.32</span>
				</div>

				<div className={cn(s.pointTitle, s.p20_18_16)}>开放端口服务</div>
				<Table columns={openPortCol} data={info.taskTime} pro />
				<div className={cn(s.pointTitle, s.p20_18_16)}>关联web资产</div>
				<Table columns={associatedAssetsCol} data={info.taskTime} pro />
			</TabPane>

			<TabPane key="3" tab="附录">
				<div className={cn(s.pointTitle, s.p20_18_16)}>主机漏洞监测参数</div>
				<div className={cn(s.p16_24, s.border)}>
					<span className={s.flex1}>
						任务类型：{TRIGGER_TYPE[info.taskSetting?.triggerType]}
					</span>
					{/* <span className={s.flex1}>
						检测漏洞模版：{profile[info.taskSetting?.scan_profile]}
					</span> */}
					{info.taskSetting?.trigger_type === 'schedule' && (
						<span className={s.flex1}>
							监测频率：{timeChange(info.taskSetting?.interval)}
						</span>
					)}
					{/* <span className={s.flex1}>
						操作系统识别：{info.taskSetting?.is_detect_os_enabled ? '是' : '否'}
					</span> */}
					<span className={s.flex1}>监测内容：模版漏洞 —— xxxx</span>
					<span className={s.flex1}>
						扫描端口：
						{info.taskSetting?.is_detect_port_enabled ? '是' : '否'}
					</span>
					<span className={s.flex1}>
						TCP扫描方式：{info.taskSetting?.is_tcp_enabled ? '是' : '未启用'}
					</span>
					<span className={s.flex1}>
						UDP扫描：{info.taskSetting?.is_udp_enabled ? '是' : '未启用'}
					</span>
				</div>
				<div className={cn(s.pointTitle, s.p20_18_16)}>其他参数</div>
				<div className={cn(s.p16_24, s.border)}>
					<span className={s.flex1}>
						监测时间段：{timeChange(info.taskSetting?.interval)}
					</span>
				</div>
				<div className={cn(s.pointTitle, s.p20_18_16)}>监测时间详情</div>
				<Table columns={hostTimeCol} data={info.taskTime} pro />
			</TabPane>
		</Tabs>
	);
}
Detail.propTypes = {
	tid: PropTypes.string.isRequired,
	atid: PropTypes.string.isRequired,
	match: PropTypes.shape({
		params: PropTypes.shape({
			assetType: PropTypes.string.isRequired,
			jid: PropTypes.string.isRequired,
		}).isRequired,
	}).isRequired,
};
export default withRouter(Detail);
